import React from 'react'
import { Row, Col } from 'antd';

import { useTranslation } from 'react-i18next'
import './footer.scss'
import { Link } from 'react-router-dom';
const footerLogo = require('assets/header/herderLogo.png')
const explanationSegmentationImg = require('assets/home/explanation-segmentation@2x.png')
function Footer() {
    const { t } = useTranslation();
    return (
        <footer className='footer-pc'>
            <Row align='middle' className='footer-box'>
                <Col xs={0} sm={0} md={0} lg={0} xl={4}>
                    <Link className='footer-item' to="/login" >
                        <div className='footer-logo' >
                            <img src={footerLogo} alt="logo" />
                            <div>
                                <p>
                                    天赋树</p>
                                <span>
                                    skilltree
                        </span>
                            </div>
                        </div>

                    </Link>
                </Col>

                <Col xs={6} sm={6} md={6} lg={6} xl={5} className='footer-item'>

                    <div>
                        <p className='footer-title'>
                            {
                                t('skilltree')
                            }
                        </p>
                        <a href="#/">
                            {
                                t('personal')
                            }
                        </a>
                        <a href="#/">
                            {
                                t('susiness')
                            }
                        </a>
                        <a href="#/">
                            {
                                t('education')
                            }
                        </a>
                        {/* <a href="#/">
                        {
                            t('aboutUs')
                        }
                    </a> */}
                    </div>
                </Col>

                <Col xs={6} sm={6} md={6} lg={6} xl={5} className='footer-item' >

                    <div>
                        <p className='footer-title'>
                            {
                                t('aboutUs')
                            }
                        </p>
                        <a href="#/">
                            {
                                t('investUs')
                            }
                        </a>
                        <a href="#/">
                            {
                                t('joinUs')
                            }
                        </a>
                        <a href="#/">
                            {
                                t('supportus')
                            }
                        </a>
                    </div>
                </Col>

                <Col xs={6} sm={6} md={6} lg={6} xl={5} className='footer-item'>

                    <div >
                        <p className='footer-title'>
                            {
                                t('support')
                            }
                        </p>
                        <a href="#/">
                            {
                                t('helpCenter')
                            }
                        </a>
                        <a href="#/">
                            {
                                t('tutorialVideos')
                            }
                        </a>
                        <a href="#/">
                            {
                                t('FAQs')
                            }
                        </a>
                    </div>
                </Col>

                <Col xs={6} sm={6} md={6} lg={6} xl={5} className='footer-item'>

                    <div >
                        <p className='footer-title'>
                            {
                                t('otherLinks')
                            }
                        </p>
                        <a href="#/">
                            {
                                t('baiduPostBar')
                            }
                        </a>
                        <a href="#/">
                            {
                                t('sina')
                            }
                        </a>
                        <a href="#/">
                            {
                                t('weChat')
                            }
                        </a>
                        <a href="#/">
                            {
                                t('zhiHu')
                            }
                        </a>
                        <a href="#/">
                            {
                                t('twitter')
                            }
                        </a>
                        <a href="#/">
                            {
                                t('facebook')
                            }
                        </a>
                    </div>
                </Col>
            </Row>

            <img src={explanationSegmentationImg} className='explanationSegmentationImg' alt="分割线" />
            <a href='https://beian.miit.gov.cn' className='record'>© 2019 南京心流信息科技有限公司 | 备案号：苏ICP备15007946号</a>
        </footer>
    )
}

export default Footer
